<template>
  <div>
    <h2>父组件</h2>
    <h2>{{ brand }}</h2>
    <h2>{{ price }}</h2>
    <button @click="fun($refs)">查看</button>
    <hr>
    <Child ref="child1">
      <template v-slot='params'>
        {{ params.msg }}
      </template>
    </Child>
    <Child ref="child1">
      <template v-slot='params'>
        <h2>{{ params.msg }}</h2>
      </template>
    </Child>
    <Child ref="child1">
      <template v-slot='params'>
        <p style="font-style: italic;text-decoration: underline;"> {{ params.msg }}</p>
      </template>
    </Child>
    <!-- <About ref="child2" /> -->
  </div>
</template>

<script setup>
import Child from "./views/child.vue"
import About from "./views/about.vue"
import { ref, reactive } from "vue"
const str = ref("字符串")
const pass = ref(123)
const price = ref(10000)
const brand = ref("奔驰")
const updatePrice = (val) => {
  price.value += val
}
provide("aa", { brand, updatePrice })
provide("bb", price)
const child1 = ref(null)
const child2 = ref(null)
const fun = (refs) => {
  for (let item in refs) {
    console.log(refs[item]);
  }
}
defineExpose({ str, pass, fun })
onMounted(() => {
  // console.log(child1.value.num, "子数据");
})

</script>

<style scoped></style>
